<template>
  <div >
    <Header></Header>
    <router-view></router-view>
    <Footer v-show="!$route.meta.isHidden"></Footer>
<!--    如果是隐藏的页面很多不建议这样做-->
<!--    <Footer v-show="$route.path!=='/login'&&$route.path!=='/register'"></Footer>-->
  </div>
</template>

<script>

import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  name: 'App',
  components:{
    Header,
    Footer
},
  //store中的数据在页面刷新的时候数据丢失, 因为vuex中的state会重新初始化解决如下
created() {
    //在页面加载时取出sessionStorage中数据
  if (sessionStorage.getItem('store')){
    this.$store.replaceState(
        Object.assign(
            {},
            this.$store.state,
            JSON.parse(sessionStorage.getItem('store'))
        )
    )
    sessionStorage.removeItem('store')
  }
  //在页面刷新时vuex中的数据存储到sessionStorage中
  window.addEventListener('beforeunload',()=>{
    sessionStorage.setItem('store',JSON.parse.stringify(this.$store.state))
  })
},
  mounted() {
//发请求 获取home页的信息
    this.getCategoryList()
  },
  methods:{
    getCategoryList(){
      this.$store.dispatch('getCategoryList')
    },
  }
}
</script>

<style>
/*#app {*/
/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*  margin-top: 60px;*/
/*}*/
</style>
